import { TextField, Divider, IconButton, Button } from '@mui/material'
import { useCallback, useState } from 'react'
import message from '../../../utils/system/message'
import { MuiColorInput } from 'mui-color-input'
import { AddCircleOutline } from '@mui/icons-material';

const CustomShape = (props) => {
  const { selectDom, layer } = props

  const [pointName] = useState('')
  const [strokeWidth, setStrokeWidth] = useState(selectDom.attrs.strokeWidth)
  const [strokeColor, setStrokeColor] = useState(selectDom.attrs.stroke)
  const [fillColor, setFillColor] = useState(selectDom.attrs.fill)
  const [offlineStrokeColor, setOfflineStrokeColor] = useState(selectDom.attrs.offlineStatus.stroke)
  const [offlineFillColor, setOfflineFillColor] = useState(selectDom.attrs.offlineStatus.fill)
  // const [valueMapping, setValueMapping] = useState([])

  const changeStrokeWidth = useCallback((e) => {
    const { value } = e.target
    if (isNaN(value)) return
    let realValue = Number(value)
    if (realValue < 2) {
      message.warning({ content: '线宽不能小于2' })
      realValue = 2
    }
    setStrokeWidth(realValue)
    selectDom.attrs.strokeWidth = realValue
    layer.draw()
  }, [selectDom])

  const strokeColorChange = useCallback((color) => {
    setStrokeColor(color)
    selectDom.attrs.stroke = color
    layer.draw()
  }, [selectDom])

  const fillColorChange = useCallback((color) => {
    setFillColor(color)
    selectDom.attrs.fill = color
    layer.draw()
  }, [selectDom])

  const offlineStrokeColorChange = useCallback((color) => {
    setOfflineStrokeColor(color)
    selectDom.attrs.offlineStatus.stroke = color
    layer.draw()
  }, [selectDom])

  const offlineFillColorChange = useCallback((color) => {
    setOfflineFillColor(color)
    selectDom.attrs.offlineStatus.fill = color
    layer.draw()
  }, [selectDom])

  return (
    <div className='customShapeOptions'>
      <div className='bindDevice'>
        <TextField
          label="绑定设备"
          value={pointName}
          variant="filled"
          InputProps={{
            readOnly: true
          }}
        />
        <Button variant="contained" sx={{ whiteSpace: 'nowrap', marginLeft: '8px' }}>选择设备</Button>
      </div>
      <div className='lineWidth'>
        <TextField label="线宽" value={strokeWidth} onChange={changeStrokeWidth} variant="filled"/>
      </div>
      <div className='mt-16'>
        <MuiColorInput value={strokeColor} onChange={strokeColorChange} label="线条颜色" variant="filled" />
      </div>
      <div className='mt-16'>
        <MuiColorInput value={fillColor} onChange={fillColorChange} label="填充颜色" variant="filled" />
      </div>
      <Divider sx={{ margin: '8px 0px' }}>离线状态</Divider>
      <div className='mt-16'>
        <MuiColorInput value={offlineStrokeColor} onChange={offlineStrokeColorChange} label="离线线条颜色" variant="filled" />
      </div>
      <div className='mt-16'>
        <MuiColorInput value={offlineFillColor} onChange={offlineFillColorChange} label="离线填充颜色" variant="filled" />
      </div>
      <Divider sx={{ margin: '8px 0px' }}>状态映射</Divider>
      <IconButton>
        <AddCircleOutline/>
      </IconButton>
    </div>
  )
}

export default CustomShape